@import "@/styles/variables.scss";
.container {
  height: $swiperHeight;
  // width: 100vw;
  position: relative;
  // overflow: hidden;

  .main {
    // 放大图片
    margin: 0 -1000px;
    height: $swiperHeight;
    .carl-item {
      height: 100%;
      position: relative;
      .itembg {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        // background: #364d79;
        background-position: center;
        background-size: 10px auto;
        // 层级
        z-index: -1;
      }
      .image {
        // 图片居中
        margin: 0 auto;
        // z-index: 99;
      }
    }
  }

  // 分页器
  .dots {
    // ul
    position: absolute;
    bottom: 20px;
    left: 0;
    width: 100%;
    text-align: center;
    li {
      display: inline-block;
    }
    .dot {
      display: inline-block;
      width: 6px;
      height: 6px;
      margin: 0 5px;
      background: url("~assets/images/dot.png") no-repeat;
      background-size: contain;
    }
    .active {
      background: url("~assets/images/dot_hover.png") no-repeat;
      background-size: contain;
      width: 7px;
      height: 7px;
    }
  }

  // 上一页/下一页
  .prev {
    width: 43px;
    height: 60px;
    opacity: 0.7;
    background: url(~/assets/images/pointlist.png) no-repeat;
    background-position: 0 0;
    position: absolute;
    top: 50%;
    left: -100px;
    transform: translateY(-50%);
  }

  .next {
    width: 43px;
    height: 60px;
    opacity: 0.7;
    background: url(~/assets/images/pointlist.png) no-repeat;
    background-position: -43px 0;
    position: absolute;
    top: 50%;
    right: -100px;
    transform: translateY(-50%);
  }
}
